{% extends "base.html" %}

{% block title %}数据采集{% endblock %}

{% block content %}
<div class="container mt-4">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h2>样品数据管理</h2>
        <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#addSampleModal">
            <i class="fas fa-plus"></i> 添加样品
        </button>
    </div>

    {% with messages = get_flashed_messages(with_categories=true) %}
        {% if messages %}
            {% for category, message in messages %}
            <div class="alert alert-{{ category }} alert-dismissible fade show" role="alert">
                {{ message }}
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="关闭"></button>
            </div>
            {% endfor %}
        {% endif %}
    {% endwith %}

    <div class="card">
        <div class="card-body">
            <table class="table table-striped" id="samplesTable">
                <thead>
                    <tr>
                        <th>样品编号</th>
                        <th>品种名称</th>
                        <th>采集日期</th>
                        <th>采集地点</th>
                        <th>硬度值</th>
                        <th>蛋白质含量</th>
                        <th>水分含量</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    {% for sample in samples %}
                    <tr>
                        <td>{{ sample.sample_id }}</td>
                        <td>{{ sample.variety_name }}</td>
                        <td>{{ sample.collection_date.strftime('%Y-%m-%d') }}</td>
                        <td>{{ sample.location }}</td>
                        <td>{{ "%.2f"|format(sample.hardness) if sample.hardness else '-' }}</td>
                        <td>{{ "%.2f"|format(sample.protein_content) if sample.protein_content else '-' }}</td>
                        <td>{{ "%.2f"|format(sample.moisture_content) if sample.moisture_content else '-' }}</td>
                        <td>
                            <button class="btn btn-sm btn-warning edit-sample" 
                                    data-id="{{ sample.id }}"
                                    data-sample-id="{{ sample.sample_id }}"
                                    data-variety-name="{{ sample.variety_name }}"
                                    data-collection-date="{{ sample.collection_date.strftime('%Y-%m-%d') }}"
                                    data-location="{{ sample.location }}"
                                    data-hardness="{{ sample.hardness or '' }}"
                                    data-protein-content="{{ sample.protein_content or '' }}"
                                    data-moisture-content="{{ sample.moisture_content or '' }}"
                                    data-notes="{{ sample.notes or '' }}">
                                <i class="fas fa-edit"></i>
                            </button>
                            <button class="btn btn-sm btn-danger delete-sample" data-id="{{ sample.id }}">
                                <i class="fas fa-trash"></i>
                            </button>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</div>

<!-- 添加样品模态框 -->
<div class="modal fade" id="addSampleModal" tabindex="-1" aria-labelledby="addSampleModalLabel">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="addSampleModalLabel">添加样品</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="关闭"></button>
            </div>
            <form id="addSampleForm" action="{{ url_for('data.add') }}" method="post">
                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label for="sample_id" class="form-label">样品编号</label>
                            <input type="text" class="form-control" id="sample_id" name="sample_id" required>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label for="variety_name" class="form-label">品种名称</label>
                            <input type="text" class="form-control" id="variety_name" name="variety_name" required>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label for="collection_date" class="form-label">采集日期</label>
                            <input type="date" class="form-control" id="collection_date" name="collection_date" required>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label for="location" class="form-label">采集地点</label>
                            <input type="text" class="form-control" id="location" name="location" required>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-4 mb-3">
                            <label for="hardness" class="form-label">硬度值</label>
                            <input type="number" step="0.01" class="form-control" id="hardness" name="hardness">
                        </div>
                        <div class="col-md-4 mb-3">
                            <label for="protein_content" class="form-label">蛋白质含量</label>
                            <input type="number" step="0.01" class="form-control" id="protein_content" name="protein_content">
                        </div>
                        <div class="col-md-4 mb-3">
                            <label for="moisture_content" class="form-label">水分含量</label>
                            <input type="number" step="0.01" class="form-control" id="moisture_content" name="moisture_content">
                        </div>
                    </div>
                    <div class="mb-3">
                        <label for="notes" class="form-label">备注</label>
                        <textarea class="form-control" id="notes" name="notes" rows="3"></textarea>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" id="cancelAddBtn">取消</button>
                    <button type="submit" class="btn btn-primary">保存</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- 编辑样品模态框 -->
<div class="modal fade" id="editSampleModal" tabindex="-1" aria-labelledby="editSampleModalLabel">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="editSampleModalLabel">编辑样品</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="关闭"></button>
            </div>
            <form id="editSampleForm" method="post">
                <div class="modal-body">
                    <!-- 与添加样品表单相同的字段 -->
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label for="edit_sample_id" class="form-label">样品编号</label>
                            <input type="text" class="form-control" id="edit_sample_id" name="sample_id" required>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label for="edit_variety_name" class="form-label">品种名称</label>
                            <input type="text" class="form-control" id="edit_variety_name" name="variety_name" required>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label for="edit_collection_date" class="form-label">采集日期</label>
                            <input type="date" class="form-control" id="edit_collection_date" name="collection_date" required>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label for="edit_location" class="form-label">采集地点</label>
                            <input type="text" class="form-control" id="edit_location" name="location" required>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-4 mb-3">
                            <label for="edit_hardness" class="form-label">硬度值</label>
                            <input type="number" step="0.01" class="form-control" id="edit_hardness" name="hardness">
                        </div>
                        <div class="col-md-4 mb-3">
                            <label for="edit_protein_content" class="form-label">蛋白质含量</label>
                            <input type="number" step="0.01" class="form-control" id="edit_protein_content" name="protein_content">
                        </div>
                        <div class="col-md-4 mb-3">
                            <label for="edit_moisture_content" class="form-label">水分含量</label>
                            <input type="number" step="0.01" class="form-control" id="edit_moisture_content" name="moisture_content">
                        </div>
                    </div>
                    <div class="mb-3">
                        <label for="edit_notes" class="form-label">备注</label>
                        <textarea class="form-control" id="edit_notes" name="notes" rows="3"></textarea>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" id="cancelEditBtn">取消</button>
                    <button type="submit" class="btn btn-primary">保存</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- 删除确认模态框 -->
<div class="modal fade" id="deleteSampleModal" tabindex="-1" aria-labelledby="deleteSampleModalLabel">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="deleteSampleModalLabel">确认删除</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="关闭"></button>
            </div>
            <div class="modal-body">
                确定要删除这个样品吗？此操作不可恢复。
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" id="cancelDeleteBtn">取消</button>
                <form id="deleteSampleForm" method="post" style="display: inline;">
                    <button type="submit" class="btn btn-danger">删除</button>
                </form>
            </div>
        </div>
    </div>
</div>

{% endblock %}

{% block scripts %}
<script>
$(document).ready(function() {
    // 初始化DataTables
    $('#samplesTable').DataTable({
        language: {
            url: "{{ url_for('static', filename='js/zh.json') }}"
        },
        order: [[2, 'desc']] // 按采集日期降序排序
    });

    // 初始化模态框
    const addModal = new bootstrap.Modal(document.getElementById('addSampleModal'));
    const editModal = new bootstrap.Modal(document.getElementById('editSampleModal'));
    const deleteModal = new bootstrap.Modal(document.getElementById('deleteSampleModal'));

    // 添加样品
    $('.btn-primary[data-bs-toggle="modal"]').click(function() {
        $('#addSampleForm').trigger('reset');
        addModal.show();
    });

    // 编辑样品
    $('.edit-sample').click(function() {
        const id = $(this).data('id');
        const sampleId = $(this).data('sample-id');
        const varietyName = $(this).data('variety-name');
        const collectionDate = $(this).data('collection-date');
        const location = $(this).data('location');
        const hardness = $(this).data('hardness');
        const proteinContent = $(this).data('protein-content');
        const moistureContent = $(this).data('moisture-content');
        const notes = $(this).data('notes');

        $('#edit_sample_id').val(sampleId);
        $('#edit_variety_name').val(varietyName);
        $('#edit_collection_date').val(collectionDate);
        $('#edit_location').val(location);
        $('#edit_hardness').val(hardness);
        $('#edit_protein_content').val(proteinContent);
        $('#edit_moisture_content').val(moistureContent);
        $('#edit_notes').val(notes);
        
        $('#editSampleForm').attr('action', `/data/edit/${id}`);
        editModal.show();
    });

    // 删除样品
    $('.delete-sample').click(function() {
        const id = $(this).data('id');
        $('#deleteSampleForm').attr('action', `/data/delete/${id}`);
        deleteModal.show();
    });

    // 取消按钮事件处理
    $('#cancelAddBtn').click(function() {
        addModal.hide();
    });

    $('#cancelEditBtn').click(function() {
        editModal.hide();
    });

    $('#cancelDeleteBtn').click(function() {
        deleteModal.hide();
    });

    // 表单验证
    function validateForm(form) {
        const sampleId = form.find('[name="sample_id"]').val().trim();
        const varietyName = form.find('[name="variety_name"]').val().trim();
        const collectionDate = form.find('[name="collection_date"]').val();
        const location = form.find('[name="location"]').val().trim();

        if (!sampleId) {
            alert('样品编号不能为空');
            return false;
        }

        if (!varietyName) {
            alert('品种名称不能为空');
            return false;
        }

        if (!collectionDate) {
            alert('采集日期不能为空');
            return false;
        }

        if (!location) {
            alert('采集地点不能为空');
            return false;
        }

        return true;
    }

    // 添加表单验证
    $('#addSampleForm').on('submit', function(e) {
        e.preventDefault();
        if (validateForm($(this))) {
            this.submit();
        }
    });

    // 编辑表单验证
    $('#editSampleForm').on('submit', function(e) {
        e.preventDefault();
        if (validateForm($(this))) {
            this.submit();
        }
    });

    // 模态框关闭时重置表单
    $('#addSampleModal').on('hidden.bs.modal', function () {
        $('#addSampleForm').trigger('reset');
    });

    $('#editSampleModal').on('hidden.bs.modal', function () {
        $('#editSampleForm').trigger('reset');
    });
});
</script>
{% endblock %} 